import React, { useEffect, useState } from "react";
import { connect } from "react-redux";

import * as actionTypes from "./store/actionCreators";

import RecommendList from "../../components/list/list";
interface Props extends csc.Props {
  bannerList?: any;
  recommendList?: any;
  getRecommendListDataDispatch?: any;
}

function Recommend(props: Props) {
  let { recommendList } = props;

  const { getRecommendListDataDispatch } = props;

  useEffect(() => {
    if (!recommendList.size) {
      getRecommendListDataDispatch();
    }
  }, []);
  
  const recommendListJS = recommendList ? recommendList.toJS() : [];

  console.log("获取数据", recommendListJS);
  
  return (
    <div>
      <RecommendList recommendList={recommendListJS}></RecommendList>
    </div>
  );
}

// 映射 Redux 全局的 state 到组件到 props 上
const mapStateToProps = (state: any) => {  
  return ({
    // 不要在这里将数据 toJS
    // 不然没错diff 比对 props 到时候都是不一样到引用, 还会导致不必要到重渲染, 属于滥用 immutable
    recommendList: state.getIn(['recommend', 'recommendList']),
  })}

// 映射 dispatch 到 props 上
const mapDispatchToProps = (dispatch: any) => {
  return {
    getRecommendListDataDispatch() {
      dispatch(actionTypes.getRecommendList());
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Recommend));
